﻿$(function () {
    $('.avatar-popotar').popover(
        {
            placement: "bottom",
            html: true,
            container: 'body',
            delay: { "show": 200, "hide": 100 },
            trigger: 'manual',
            template: '<div class="popover avatar-popover" role="tooltip"><div class="popover-body content"></div></div>',
            content: `
                    <div class ="header">
                        <div class ="nickname">
                            ${userInfo.nickName}
                            <i class="iconfont ${userInfo.sex == 1 ? "icon-nv" : userInfo.sex == 2 ? "icon-nan" : ""}" style="font-size: 16px;"></i>
                        </div>
                    </div>
                    <div class ="layui-row mt-10">
                        <div class ="layui-col-md6">
                            <a class ="menu-item" href="/User/Arts.aspx?id=${userInfo.id}">
                                <i class ="iconfont icon-home1"></i>
                                个人中心
                            </a>
                        </div>
                       <div class ="layui-col-md6">
                            <a class ="menu-item" href="/Setting/Profile.aspx">
                                <i class ="iconfont icon-setting"></i>
                                设置
                            </a>
                        </div>
                        <div class ="layui-col-md6">
                            <a class ="menu-item" href="/MessageBoard.aspx">
                                <i class ="iconfont icon-huodong"></i>
                                反馈建议
                            </a>
                        </div>
                        ${userInfo.role === 2 ? `<div class="layui-col-md6">
                            <a class="menu-item" href="/Admin">
                                <i class="iconfont icon-setting"></i>
                                后台管理
                            </a>
                        </div>`:""}
                        <div class ="layui-col-md6">
                            <a class ="menu-item" href="/Logout.aspx">
                                <i class ="iconfont icon-exit"></i>
                                退出
                            </a>
                        </div>
                    </div>
                `
        }).on("mouseenter", function () {
            var _this = this;
            $(this).popover("show");
            $(this).children().addClass("avatar-scale");
            $(".popover").on("mouseleave", function () {
                $(_this).popover('hide');
                $(_this).children().removeClass("avatar-scale");
            });
        }).on("mouseleave", function () {
            var _this = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide");
                    $(_this).children().removeClass("avatar-scale");
                }
            }, 300);
        });

    $('.publish-popotar').popover({
        placement: "bottom",
        html: true,
        trigger: 'focus',
        container: 'body',
        delay: { "show": 200, "hide": 200 },
        template: '<div class="popover publish-popover" role="tooltip"><div class="popover-body publish-list"></div><div class="arrow"></div></div>',
        content: `
            <a href="/Art/Edit.aspx" class="layui-show-md-block layui-show-sm-block">
                <div class ="publish-item flex-container">
                    <img src="/Content/Images/publish-icon.png" class ="icon">
                    <span class ="text">发布作品</span>
                </div>
            </a>
            <a href="/Project/Edit.aspx" class="layui-show-md-block layui-show-sm-block">
                <div class ="publish-item flex-container">
                        <img src="/Content/Images/project-icon.png" class ="icon">
                        <span class ="text">发布需求</span>
                </div>
            </a>
            `
    });
})